<template>
  <div class="order">
    <dv-full-screen-container style="padding-top: 20px; box-sizing: border-box; height: 100%">
      <a-row>
        <a-col :span="9">
          <dv-decoration-8 style="width: 100%; height: 40px" />
        </a-col>
        <a-col :span="6">
          <div style="color: white; font-size: 35px; display: flex; align-items: center; justify-content: center">数字车间看板</div>
        </a-col>
        <a-col :span="9">
          <dv-decoration-8 :reverse="true" style="width: 100%; height: 40px" />
        </a-col>
      </a-row>
      <a-row style="margin-top: 30px">
        <a-col :span="12">
          <dv-border-box-8 style="width: 100%; height: 400px; padding: 30px; box-sizing: border-box">
            <dv-scroll-board :config="config1" @click="showReset" />
          </dv-border-box-8>
        </a-col>
        <a-col :span="12">
          <dv-border-box-8 style="width: 100%; height: 400px; padding: 30px; box-sizing: border-box">
            <dv-scroll-board :config="config2" @click="showReset" />
          </dv-border-box-8>
        </a-col>
      </a-row>
      <div class="order-bottom">
        <a-button @click="back">返回上一页</a-button>
      </div>
    </dv-full-screen-container>

    <a-modal
      v-model:visible="resetVisible"
      hide-title
      width="300px"
      :modal-style="{ background: 'rgb(64,64,145)' }"
      :body-style="{ color: 'white' }"
    >
      <div>确定清零吗？</div>
      <template #footer>
        <a-row>
          <a-col :span="12" style="text-align: left">
            <a-button @click="cancel">取消</a-button>
          </a-col>
          <a-col :span="12">
            <a-button style="background-color: #3081d5; color: white" @click="reset">确定</a-button>
          </a-col>
        </a-row>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './mqttDeviceScreen.ts';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup },
  setup() {
    const { base, back, reset, showReset, cancel } = importConfig();

    return {
      ...toRefs(base),
      back,
      reset,
      showReset,
      cancel,
    };
  },
});
</script>

<style lang="less" scoped>
.order {
  position: relative;
  background-color: #00014f;
  height: 100vh;
  box-sizing: border-box;

  &-bottom {
    position: absolute;
    right: 10px;
    bottom: 10px;

    button {
      font-size: 25px;
    }
  }

  :deep(.dv-scroll-board .header .header-item) {
    font-size: 30px;
  }

  :deep(.dv-scroll-board .rows .ceil) {
    font-size: 25px;
    background: transparent !important;
  }

  :deep(.dv-scroll-board .header) {
    background-color: transparent !important;
  }

  :deep(.dv-scroll-board .rows .row-item) {
    background-color: transparent !important;
  }
}
</style>
